<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="back" @click="toPerson">
        <i class="fa fa-angle-left"></i>
      </p>
      <p class="font">我的优惠券</p>
    </header>
    <!-- 优惠券部分 -->
    <div class="coupon">
      <ul class="business">
        <li v-show="this.userCoupon[0].quantity > 0">
          <img :src="this.coupon[this.userCoupon[0].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[0].quantity }} </h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[0].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[0].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[1].quantity > 0">
          <img :src="this.coupon[this.userCoupon[1].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[1].quantity }} </h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[1].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[1].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[2].quantity > 0">
          <img :src="this.coupon[this.userCoupon[2].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[2].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[2].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[2].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[3].quantity > 0">
          <img :src="this.coupon[this.userCoupon[3].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[3].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[3].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[3].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[4].quantity > 0">
          <img :src="this.coupon[this.userCoupon[4].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[4].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[4].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[4].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[5].quantity > 0">
          <img :src="this.coupon[this.userCoupon[5].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[5].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[5].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[5].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[6].quantity > 0">
          <img :src="this.coupon[this.userCoupon[6].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[6].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[6].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[6].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[7].quantity > 0">
          <img :src="this.coupon[this.userCoupon[7].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[7].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[7].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[7].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[8].quantity > 0">
          <img :src="this.coupon[this.userCoupon[8].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[8].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[8].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：2024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[8].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
        <li v-show="this.userCoupon[9].quantity > 0">
          <img :src="this.coupon[this.userCoupon[9].typeId - 1].couponImg">
          <div class="business-info">
            <!-- 第一行 -->
            <div class="business-info-h">
              <h3> 外卖神券 × {{ this.userCoupon[9].quantity }}</h3>
              <div class="business-info-like">￥{{ this.coupon[this.userCoupon[9].typeId - 1].values }}</div>
            </div>
            <!-- 第二行 -->
            <div class="business-info-delivery">
              <p>有效期至：20242024-10-05</p>
              <p style="margin-right: 2.5vw; color: orangered;">￥{{ this.coupon[this.userCoupon[9].typeId - 1].usePrice
                }}可用</p>
            </div>
            <!-- 第三行 -->
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
              </div>
              <div class="business-info-promotion-right">
                <button @click="toIndex">去使用</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Coupons',
  data() {
    return {
      user: this.$getSessionStorage('user'),
      coupon: [],
      userCoupon: [],
    }
  },
  created() {
    this.$axios.get('coupons').then(response => {
      console.log(response.data)
      this.coupon = response.data
    }).catch(error => {
      console.error(error);
    });

    this.$axios.get(`userCoupons/all/${this.user.userId}`, {
      params: {
        token: this.$getSessionStorage("token")
      }
    }).then(response => {
      console.log(response.data)
      this.userCoupon = response.data
      // console.log(this.userCoupon[1].typeId);

    }).catch(error => {
      console.error(error);
    });
  },
  methods: {
    toPerson() {
      this.$router.push('/person')
    },
    toIndex() {
      this.$router.push('/index')
    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}

.wrapper header .back {
  margin: 0 2vw 0 3vw;
  font-weight: 700;
  font-size: 6vw;
  user-select: none;
  cursor: pointer;
}

/*********** 优惠券部分 ***********/
.wrapper .coupon {
  width: 100%;
  padding-top: 14vw;
  padding-bottom: 16vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business {
  width: 95%;
  background-color: #fff;
  border-radius: 20px;
}

.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  /* border-bottom: solid 1px #DDD; */
  user-select: none;
  cursor: pointer;
  border-radius: 20px;
  display: flex;
}

.wrapper .business li img {
  width: 20vw;
  height: 20vw;
  border-radius: 10px;
}

.wrapper .business li .business-info {
  width: 100%;
  box-sizing: border-box;
  padding-left: 3vw;
}

.wrapper .business li .business-info .business-info-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3vw;
  margin-bottom: 2vw;
}

.wrapper .business li .business-info .business-info-h h3 {
  font-size: 4vw;
  color: #333;
}

.wrapper .business li .business-info .business-info-h .business-info-like {
  width: 1.6vw;
  height: 3.4vw;
  color: orangered;
  font-size: 5vw;
  font-weight: 600;
  margin-right: 9vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business li .business-info .business-info-delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  color: #666;
  font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-promotion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8vw;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-left {
  display: flex;
  align-items: center;
}


.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right {
  display: flex;
  align-items: center;
  font-size: 2.5vw;
  color: #999;
  margin-right: 1.8vw;
}

.wrapper .business li .business-info .business-info-promotion .business-info-promotion-right button {
  border: none;
  background-color: orangered;
  color: #fff;
  border-radius: 7px;
  padding: 0.5vw 2vw;

}
</style>